<template>
  <div>
    <!--导航部分 -->
    <van-nav-bar  left-arrow>
      <template #left>
        <van-icon name="search" size="18" @click="tosearch" />
      </template>
       <template #title >
         <div @click="goCity">{{addres}}</div>
      </template>
      <template #right>
        <van-icon name="contact" @click="topersonal" size="18" />
      </template>
    </van-nav-bar>

<!-- 轮播图 -->
<van-swipe class="my-swipe" :autoplay="3000" indicator-color="#3190e8">
  <van-swipe-item>
    <van-grid  :border='false' icon-size='50px'>
  <van-grid-item :icon="baseUrl+item.image_url"  @click="giveid(item.title)" :text="item.title" v-for="item in entryoneList" :key="item.id" />
</van-grid>
  </van-swipe-item>
  <van-swipe-item>
      <van-grid :border='false' icon-size='50px' >
  <van-grid-item :icon="baseUrl+item.image_url"  @click="giveid(item.title)" :text="item.title" v-for="item in entrytwoList" :key="item.id" />
</van-grid>
  </van-swipe-item>
</van-swipe>
<!-- 内容 -->
<div class="content">
  <h6><van-icon name="shop-o" /><span> 附近商家</span></h6>
  <!-- 商家 -->
 <shopList :arr='shoppingList' @toshop="toshopping"></shopList>
</div>
<van-loading />
  </div>
</template>

<script>
import shopList from "../components/shop-list.vue";
import { guess, geohash, entry, restaurants } from "../api/index";
import {geohashs} from '../api/citylist'
export default {
  components: { shopList },
  data() {
    return {
      geohash: "", //本地地址
      addres:'广东省广州市海珠区阅江西路220号',
      address: "", //精准地址
      entryList: [], //食品分类列表
      entryoneList: [], //分类第一页
      entrytwoList: [], //分类第二页
      baseUrl: "https://fuss10.elemecdn.com",
      starValue: "", //星星数量
      shoppingList: [], //餐厅列表
      gogeohash:''
    };
  },
  created() {
    
    guess().then((res) => {
      console.log(55, res);
      this.geohash = res.data;
      geohash(this.geohash.latitude, this.geohash.longitude).then((res) => {
        console.log(58, res);
        // this.address = res.data;
      });

      //餐厅列表
      restaurants({
        latitude: this.geohash.latitude,
        longitude: this.geohash.longitude,
      }).then((res) => {
        console.log(71, res);
        this.shoppingList = res.data;
      });
    });
    //食品分类列表
    entry().then(res=>{
      this.entryList=res.data
      this.entryoneList=res.data.slice(0,8)
      this.entrytwoList=res.data.slice(8)
    })

    console.log(82,this.$route.query.geohash)
    this.gogeohash=this.$route.query.geohash
    geohashs(this.$route.query.geohash).then(res=>{
      console.log(83,res)
      this.address = res.data;
      if(res.data.message!='参数错误'){
      this.addres=res.data.address
      }
      
    })

    
},
methods:{
  tosearch(){
    this.$router.push('/layout/search')
    this.$emit('change',1)
    
  },
  topersonal(){
    this.$router.push({
      path:'/layout/personal',
    })
    this.$emit('change',3)
  },
  goCity(){
    this.$router.push({
      path:'/citylist',
      query:{
        geohash:this.gogeohash
      }
    })
  
  },
  giveid(title){
    this.$router.push({
      path:'/categoryList',
      query:{
        title:title,
        geohash:this.gogeohash
      }
    })
  },
  toshopping(id){
    this.$router.push({
      path:'/shopping',
      query:{
        id
      }
    })
  }
}
}
</script>

<style lang="less" scoped>
.van-nav-bar {
  background-color: #3190e8;
  .van-icon {
    color: #fff;
  }
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #fff;
}
.van-image {
  width: 80%;
}
.content {
  border-top: 10px solid #f5f5f5;
  h6 {
    font-size: 10px;
    color: #ccc;
    margin: 10px;
  }
  .content-main {
    height: 100vh;
    background-color: #fff;
    ul {
      height: 89px;
      li {
        display: flex;
        height: 100%;
        .right {
          height: 100%;
          width: 100%;
          > div {
            height: 33.33%;
            display: flex;
            justify-content: space-between;
            padding: 0 10px;
          }
          h5 {
            .pin {
              background-color: #ffdb36;
              font-size: 12px;
            }
          }
          i {
            font-size: 12px;
            color: #c0c3ca;
            line-height: 30px;
          }
          .twoRight {
            line-height: 30px;
            height: 30px;
            font-size: 16px;
            .yellow {
              color: #fe980a;
              font-size: 16px;
            }
            span {
              font-size: 14px;
              color: #a3a398;
            }
          }
          .twoLeft {
            line-height: 30px;
            .blue {
              background-color: #308fe8;
              color: #fff;
              font-size: 12px;
            }
            .write {
              font-size: 12px;
              color: #308fe8;
              border: 1px solid #308fe8;
              line-height: 33.33%;
            }
          }
          .threeLeft {
            font-size: 12px;
            line-height: 40px;
          }
          .threeRight {
            font-size: 12px;
            line-height: 40px;
            .bue {
              color: #308fe8;
            }
            span {
              color: #b1b1b0;
            }
          }
        }
      }
    }
  }
}
</style>